﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="../Content/css/bootstrap.min.css" />
    <link rel="stylesheet" href="../Content/css/font-awesome.min.css" />
    <link rel="stylesheet" href="../Content/css/ace.min.css" />
    <link rel="stylesheet" href="../Content/css/jframe.css" />

</head>
<body ng-app="formApp" class="page-content">
    <div ng-controller="formCtrl">
        <div class="dlg-content">
            <form class="form-horizontal" role="form">
                <div class="form-group">
                    <label class="col-sm-3 control-label no-padding-right" for="categoryId">分类</label>
                    <div class="col-sm-9">
                        <select class="col-xs-10 col-sm-5" id="categoryId" ng-model="categoryId">
                            <option ng-repeat="category in categories" value="{{category.id}}">{{category.name}}</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label no-padding-right" for="code">编号</label>
                    <div class="col-sm-9">
                        <input type="text" id="code" placeholder="编号" class="col-xs-10 col-sm-5" ng-model="code" />
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label no-padding-right" for="caption">名称</label>
                    <div class="col-sm-9">
                        <input type="text" id="caption" placeholder="名称" class="col-xs-10 col-sm-5" ng-model="caption" />
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label no-padding-right" for="dataType">类型</label>
                    <div class="col-sm-9">
                        <select class="col-xs-10 col-sm-5" id="dataType" ng-model="dataType" ng-change="interactive.dataTypeSelected()">
                            <option ng-repeat="dataType in dataTypes" value="{{dataType.id}}">{{dataType.caption}}({{dataType.code}})</option>
                        </select>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-5">
                        <div class="form-group">
                            <label class="col-sm-3 control-label no-padding-right" for="length">最小长度</label>
                            <div class="col-sm-9">
                                <input type="text" id="length" placeholder="最小长度" class="col-xs-12 col-sm-5" ng-readonly="isMinLengthOptional" ng-model="minLength" />
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-6">
                        <div class="form-group">
                            <label class="col-sm-3 control-label no-padding-right" for="length">最大长度</label>
                            <div class="col-sm-9">
                                <input type="text" id="length" placeholder="最大长度" class="col-xs-10 col-sm-5" ng-readonly="isMaxLengthOptional" ng-model="maxLength" />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label no-padding-right" for="validationRegex">正则表达式(验证)</label>
                    <div class="col-sm-9">
                        <input type="text" id="validationRegex" placeholder="正则表达式" class="col-xs-10 col-sm-5" ng-model="validationRegex" />
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-3 control-label no-padding-right" for="description">描述</label>

                    <div class="col-sm-9">
                        <textarea class="col-xs-10 col-sm-5" style="resize:none;" id="description" placeholder="描述" ng-model="description"></textarea>
                    </div>
                </div>

            </form>
        </div>
        <div class="dlg-footer">
            <div class="center">
                <div class="btn-group ">
                    <button class="btn btn-sm btn-purple" ng-click="interactive.onOK()">
                        <i class="icon-save bigger-125"></i>
                        提 交
                    </button>
                </div>
                <div class="btn-group">
                    <button class="btn btn-sm btn-info" ng-click="interactive.onCancel()">
                        <i class="icon-undo bigger-125"></i>
                        返 回
                    </button>
                </div>
            </div>
        </div>
    </div>
    <script src="../Config.js"></script>
    <script src="../Content/js/jquery-1.10.2/jquery-1.10.2.min.js"></script>
    <script src="../Content/js/bootstrap.min.js"></script>
    <script src="../Content/js/promise/Promise.js"></script>
    <script src="../Content/js/ace-elements.min.js"></script>
    <script src="../Content/js/ace.min.js"></script>
    <script src="../Content/js/bootbox.min.js"></script>
    <script src="../Content/js/angular-1.2.29/angular-1.2.29.min.js"></script>

    <script src="../Content/js/jquery.gritter.min.js"></script>
    <script src="../Content/js/cppei/cppei.view.js"></script>
    <script src="../Content/js/cppei/cppei.paginationPlugin.js"></script>
    <script>
        cppei.install();
        
        angular.module('formApp', []).controller("formCtrl", function ($scope, $http) {
            $scope.service = {
                loadCategoryList: function () {
                    var prms = new Promise();
                    $http({
                        method: 'get',
                        url: jframe.getUrlWithTimespan('api/FieldType/CategoryList')
                    }).success(function (result) {
                        if (result.isSuccess) {
                            debugger;
                            $scope.categories = result.data.items;
                            prms.resolve();
                        } else {
                            cppei.growlError(result.message);
                            prms.reject();
                        }
                    }).error(function (result) {
                        cppei.growlError('error');
                        prms.reject();
                    });
                    return prms;
                },
                loadDataTypeList: function () {
                    $http({
                        method: 'get',
                        url: jframe.getUrlWithTimespan('api/FieldType/DataTypeList')
                    }).success(function (result) {
                        if (result.isSuccess) {
                            debugger;
                            $scope.dataTypes = result.data.items;
                        } else {
                            cppei.growlError(result.message);
                        }
                    }).error(function (result) {
                        cppei.growlError('error');
                    });
                }
            };

            $scope.interactive = {
                dataTypeSelected: function () {
                    if ($scope.dataType) {
                        for (var index = 0; index < $scope.dataTypes.length; index++) {
                            if ($scope.dataType == $scope.dataTypes[index].id) {
                                if ($scope.dataTypes[index].isMinLengthOptional) {
                                    $scope.minLength = $scope.dataTypes[index].minLength;
                                    $scope.isMinLengthOptional = false;
                                } else {
                                    $scope.minLength = '-';
                                    $scope.isMinLengthOptional = true;
                                }
                                if ($scope.dataTypes[index].isMaxLengthOptional) {
                                    $scope.maxLength = $scope.dataTypes[index].maxLength;
                                    $scope.isMaxLengthOptional = false;
                                } else {
                                    $scope.maxLength = '-';
                                    $scope.isMaxLengthOptional = true;
                                }
                            }
                        }
                    }
                },
                onCancel: function () {
                    cppei.closeDialog(false, null);
                },
                onOK: function () {
                    if (!$scope.categoryId) {
                        return;
                    }

                    $http({
                        method: 'post',
                        url: jframe.getUrl('Api/FieldType/Create'),
                        cache: false,
                        data: {
                            categoryId: $scope.categoryId,
                            code: $scope.code,
                            caption: $scope.caption,
                            dataType: $scope.dataType,
                            minLength: $scope.minLength,
                            maxLength: $scope.maxLength,
                            validationRegex: $scope.validationRegex,
                            description: $scope.description
                        }
                    }).success(function (result, status) {
                        //debugger;
                        if (result.isSuccess) {
                            //创建成功后删除该条信息
                            cppei.growl('创建成功!');
                            cppei.closeDialog(true, null);
                        } else {
                            cppei.growlError(result.message);
                        }
                    }).error(function (result, status) {
                        cppei.growlError(result.message);
                    });
                    //cppei.closeDialog(true, { value: 1 });
                }
            }

            $scope.service.loadCategoryList().then($scope.service.loadDataTypeList, function () { });
        });
    </script>
</body>
</html>
